<!-- search -->
<template>
  <div class="search" :id="randomId">
    <p class="inputBox" @click="inputActive" @blur="inputBlur">
      <input type="text" class="input" :placeholder="placeholder" @blur="inputBlur" v-model="input">
      <el-button icon="el-icon-search" circle class="button" @click="search" :loading="loading"></el-button>
    </p>
  </div>
</template>

<script>
export default {
  props: {
    theme: {
      default: 'white',
      type: String
    },
    width: {
      default: 500,
      type: Number
    },
    value: {
      default: '',
      type: String
    },
    placeholder: {
      default: 'search...',
      type: String
    },
    loading: {
      default: false,
      type: Boolean
    }
  },
  name: 'Search',
  data() {
    return {
      randomId: '',
      input: this.value
    }
  },
  methods: {
    // 样式监听
    hasTheme(theme) {
      let search = document.getElementById(this.randomId).style
      if (theme == 'white') {
        search.setProperty('--bk-color', '#fff')
        search.setProperty('--tx-color', '#000')
      } else {
        search.setProperty('--tx-color', '#fff')
        search.setProperty('--bk-color', '#000')
      }
    },
    hasWidth() {
      let search = document.getElementById(this.randomId).style
      let currentWidth = this.width < 300 ? 300 : this.width
      search.setProperty('--width', currentWidth + 'px')
      search.setProperty('--width-input', (currentWidth - 80) + 'px')
    },

    // 动画监听
    inputActive() {
      let search = document.getElementById(this.randomId)
      search.style.setProperty('--current-opacity', '1')
      search.firstElementChild.firstElementChild.focus()
      this.$emit('focus')
    },
    inputBlur() {
      document.getElementById(this.randomId).style.setProperty('--current-opacity', '70%')
      this.$emit('blur')
    },
    search(e) {
      this.$emit('search-click', this.input)
      this.inputActive()
    }
  },
  created() {
    this.randomId = '' + this.$u.hashCode(this.$options.name + this.$u.random())
    this.$emit('getId', this.randomId)
  },
  mounted() {
    this.$nextTick(() => {
      this.hasTheme(this.theme)
      this.hasWidth()
      this.inputBlur()
    })
  }
}
</script>
<style lang='scss' scoped>
@import '@a/scss/base.scss';
@import '@a/scss/pc/search.scss';

</style>
